<script lang="ts" setup name="AddEditArticle">
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import DocumentChecked from "~icons/ep/document-checked";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Upload from "@/components/Upload/upload.vue";
import { useArticle } from "./index";
import { ArticleForm } from "@/api/blog/article";
const props = defineProps<{
  visible: boolean;
  articleForm: ArticleForm;
  onSearch?: () => void;
}>();
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
}>();
const {
  form,
  coverUrl,
  dialogVisible,
  tagOptionList,
  articleFormRef,
  articleFormRules,
  categoryOptionList,
  coverPreviewVisible,
  dialogArticleFormRef,
  dialogArticleFormRules,
  closeDialog,
  publish,
  submitForm,
  uploadImage,
  articleTitleVAlidate
} = useArticle(props, emit);
</script>

<template>
  <div>
    <el-card shadow="never" class="card">
      <template #header>
        <div class="font-bold">{{ form.id ? "编辑" : "写" }}文章</div>
      </template>
      <el-form
        ref="articleFormRef"
        :inline="true"
        :model="form"
        :rules="articleFormRules"
        class="bg-bg_color w-[99/100] h-[100%]"
        label-width="120"
      >
        <el-form-item
          style="width: 65%"
          label-width="80"
          label="文章标题"
          prop="title"
        >
          <el-input
            v-model="form.title"
            placeholder="请输入文章标题"
            clearable
            show-word-limit
            maxlength="55"
            @change="articleTitleVAlidate"
          />
        </el-form-item>
        <el-form-item style="width: 25%">
          <div class="publish-btn">
            <el-button
              type="danger"
              size="small"
              :icon="useRenderIcon(DocumentChecked)"
              @click="publish(articleFormRef)"
              >{{ form.id ? "修改文章" : "发布文章" }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item style="width: 100%; height: auto" prop="content">
          <MdEditor v-model="form.content" @onUploadImg="uploadImage" />
        </el-form-item>
      </el-form>
      <el-dialog
        v-model="dialogVisible"
        :title="form.id ? '修改文章' : '发布文章'"
        :width="800"
        draggable
        :before-close="closeDialog"
      >
        <el-form
          ref="dialogArticleFormRef"
          :inline="true"
          :model="form"
          :rules="dialogArticleFormRules"
          class="bg-bg_color w-[99/100]"
          label-width="120"
        >
          <el-form-item class="form-item100" label="文章标题" prop="title">
            {{ form.title }}
          </el-form-item>
          <el-form-item class="form-item100" label="文章作者" prop="author">
            <el-input
              v-model="form.author"
              placeholder="请输入作者名称(不超过15个字符)"
              style="width: 70%"
              maxlength="15"
            />
          </el-form-item>
          <el-form-item class="form-item100" label="文章描述" prop="summary">
            <el-input
              v-model="form.summary"
              placeholder="说点儿什么，太抽象了可不好"
              style="width: 70%"
              clearable
              type="textarea"
              maxlength="150"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 3 }"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="文章分类" prop="categoryId">
            <el-select
              v-model="form.categoryId"
              :style="{ width: '380px' }"
              placeholder="请选择分类"
              filterable
              clearable
            >
              <el-option
                v-for="item in categoryOptionList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文章标签" prop="tags">
            <el-select
              v-model="form.tags"
              :style="{ width: '380px' }"
              placeholder="请选择标签"
              multiple
              filterable
              clearable
              allow-create
              :multiple-limit="3"
            >
              <el-option
                v-for="item in tagOptionList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item100 article-cover"
            label="文章缩略图"
            prop="coverList"
          >
            <Upload
              v-model:file-list="form.coverList"
              :width="260"
              :height="150"
              :limit="1"
            />
          </el-form-item>
          <el-form-item class="form-item100" label="置顶">
            <el-switch
              v-model="form.isTop"
              size="small"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
          <el-form-item class="form-item100" label="知识库">
            <el-switch
              v-model="form.type"
              size="small"
              active-text="是"
              inactive-text="否"
              :active-value="2"
              :inactive-value="1"
            />
          </el-form-item>
          <el-form-item class="form-item100" label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :value="1">公开</el-radio>
              <el-radio :value="2">私密</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button size="small" @click="closeDialog()">取消</el-button>
          <el-button
            size="small"
            type="danger"
            @click="submitForm(dialogArticleFormRef)"
          >
            {{ form.id ? "修改文章" : "发布文章" }}
          </el-button>
        </template>
      </el-dialog>
      <el-dialog v-model="coverPreviewVisible">
        <img w-full :src="coverUrl" alt="Preview Image" />
      </el-dialog>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.card {
  overflow: hidden;
}

.publish-btn {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.flex_r {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.form-item {
  &45 {
    width: 45%;
    font-weight: bold;
  }

  &100 {
    width: 100%;
    font-weight: bold;
  }
}

:deep(.el-select-dropdown__item) {
  padding: 0 5px;
}

:deep(.el-dialog.is-fullscreen) {
  justify-content: center; /* 垂直居中 */
  width: 800px;
  max-height: 70vh;
  overflow: hidden auto;
}

:deep(.el-dialog__footer) {
  position: absolute;
  right: 5%;
  bottom: 10px;
}

.md-editor {
  height: calc(100vh - 260px);
}

.article-cover {
  :deep(.el-form-item__content) {
    width: 260px !important;
    height: 150px !important;
  }

  :deep(.el-upload-list__item) {
    width: 260px !important;
    height: 150px !important;
    margin: 0 !important;
    border: none !important;
  }

  :deep(.el-upload--picture-card) {
    width: 260px !important;
    height: 150px !important;
  }

  :deep(.el-upload-list--picture-card) {
    width: 260px !important;
    height: 150px !important;
    margin: 0 !important;
    border: none !important;
  }
}
</style>
